<template>
	<view class="t-login" >
					<view class="cl" v-if="type=='phone'" style="margin-top: 100rpx;">
						<view class="t-a">
							<image
							 src="https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/login/sj.png"
							 ></image>
							<input  type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="phone" />
						</view>
						<view class="t-a">
							<image src="https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/login/yz.png"></image>
								<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="code" />
								<view v-if="showText" class="t-c" @click.stop="getCode()" :style="'background: '+set.app_color">发送验证码</view>
								<view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view>
						</view>
					</view>
					<template v-if="type=='auto'">
						<!-- #ifdef MP-WEIXIN -->
						   <view class="avatarUrl" style="display: flex;flex-direction: column;z-index: 999;margin-top: 100rpx;text-align: center;">
							   <view style="margin: 10rpx auto;width:200rpx;height:200rpx;border-radius: 100px;position: relative;">
								   <image :src="avatarUrl" class="refreshIcon"
								   style=" width:200rpx;height:200rpx;border-radius: 100px;border: 2px #fff solid;"></image>
								   <button  type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
									style="opacity: 0;position: absolute;width: 100%;height: 100%;z-index: 100;left: 0;top: 0;border-radius: 100px;"></button>
									<text style="font-size: 12px;color: #666">点击获取头像</text>
							   </view>
							   
						           
						        </view>
						        <view class="nickname" style="display: flex;flex-direction: row;margin-top: 80rpx;">
						            <input type="nickname" class="weui-input" 
						            :value="nickName" @blur="bindblur" placeholder="请输入昵称"
						                @input="bindinput" />
						        </view>
						
						        <button type="primary" @click="save" style="margin-left: 20rpx;margin-top: 20rpx;">
						             授权登录
						        </button>
					<!-- <button type="balanced"@click="login()" color="#00c486">微信一键登录</button> -->
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<u-button @click="login()" color="#55aaff" >支付宝一键登录</u-button>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<u-button @click="login"  color="#5555ff" >抖音/头条一键登录</u-button>
						<!-- #endif -->
						<!-- #ifdef MP-BAIDU -->
							<u-button @getuserinfo="login"  color="#5555ff" open-type="getUserInfo">百度一键登录</u-button>
						<!-- #endif -->
						<!-- #ifdef MP-QQ -->
							<u-button @getuserinfo="login()" color="#5555ff" open-type="getUserInfo">QQ一键登录</u-button>
						<!-- #endif -->
						
					</template>
					<u-button @click="login()"  :color="set.app_color" v-else>登录</u-button>
					
					<view style="margin-top: 10px;font-size: 12px;color: #999999;z-index: 999101;" v-if="type=='phone'" @click="type='auto'">
					<!-- #ifdef MP-WEIXIN -->
					使用微信一键登录
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					使用支付宝一键登录
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					使用抖音/头条一键登录
					<!-- #endif -->
					<!-- #ifdef MP-BAIDU -->
					使用百度一键登录
					<!-- #endif -->
					<!-- #ifdef MP-QQ -->
					<view style="text-align: center;">
						使用QQ一键登录
					</view>
					<!-- #endif -->
					</view>
					<!-- <view style="margin-top: 10px;font-size: 12px;color: #999999;z-index: 101;" v-else @click="type='phone'">手机短信登录</view> -->
					<!-- 页面装饰图片 -->
					<image class="img-a" :src="set.right_top_img" v-if="set.right_top_img.length"></image>
					<image class="img-b" :src="set.left_bottom_img" v-if="set.left_bottom_img.length"></image>
	</view>
</template>

<script>
	export default {
			name:"login",
			data() {
				return {
			avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
                nickName: '',
					title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
					second: 60, //默认60秒
					showText: true, //判断短信是否发送
					phone: '', //手机号码
					code: '' ,//验证码
					type:"auto",
					page:""
					
				};
			},props:{
				 set:{
					type:Object,
				 	default(){
						return {
							right_top_img:"",
							left_bottom_img:"",
							title:"",
							app_color:""
						}
					}
				 },
				 page2:{
					 type:String,
					default:""
				 },
				pageparam:{
					type:Object,
					default(){
						return {
							
						}
					}
				},
			},created() {
				//#ifdef H5
					this.type = 'phone';
				//#endif
				
				if(this.pageparam&&this.pageparam.page){
					this.page = decodeURIComponent(this.pageparam.page)
				}
			},methods:{
				 //昵称输入框blur
				bindblur(e) {
					 console.log('nickName', e)
					 this.nickName = e.detail.value;
				 },
				//昵称输入框input
				 bindinput(e) {
					 console.log('nickName', e)
					 this.nickName = e.detail.value;
				 },
				//选择头像
				 onChooseavatar(e) {
					console.log(e.detail);
					 this.avatarUrl = e.detail.avatarUrl;
				 },
				  //保存头像和昵称
				 save() {
					 //判断输入数据
					 if (this.nickName.length < 2) {
						 uni.showToast({
							 title:"昵称最少两个字",
							 icon:"error",
						 })
						 return false;
					 }
					 if (this.avatarUrl == 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0') {
						 uni.showToast({
							 title:"请选择头像",
							 icon:"error",
						 })
						 return false;
					 }
					 let self = this;
					 //保存到线上
					 uni.showLoading({
						 title: '加载中'
					 });
					   uni.login({
					 provider: 'weixin',
						success: function (loginRes) {
							console.log(34);
							console.log(loginRes);
						uni.getUserInfo({
						   success(e) {
					
					       let param = self.requestParam({
							   username:self.nickName,
							   unicode:loginRes.code
						   });
							
							 uni.uploadFile({
								url: self.moxiConfig('domain')+'/index/app/login',
								filePath: self.avatarUrl,
								name: 'file',
								formData: param,
								header: {
								},
								success: res => {
									// 注意：这里返回的res.data类型是string  需要自己去转换为JSON
									res.data = JSON.parse(res.data);
									console.log(1111);
									console.log(res.data);
									if(res.data.userData){//保存用户信息
										uni.setStorageSync('userinfo',res.data.userData);
									}
									uni.reLaunch({
										url: self.page
									});
								},
								fail: (error) => {
									uni.showToast({
										title: error,
										duration: 2000
									});
								}, 
								complete: () => {
									uni.hideLoading();
								}
							});
						   },fail(e) {
							self.msg('授权登录失败！')
						   }
						})
						}
					 });
					
				 },
				 back(){
				 	if(this.page2.length){
						uni.reLaunch({
							url: this.page
						});
					}else{
						uni.reLaunch({
							url: '/index/index/index'
						});
					}
				 },
				 home(){
				 	this.navto('pages/index/index',true)
				 },
				 login(res) {
				 let self = this;
				 if(this.type=='phone'){
				 	let info = {
				 		phone:this.phone,
				 		code:this.code
				 	}
				 	this.moxiPost('/index/app/login',info,function(data){
				 		self.back()
				 	})
				 	return false;
				 }
				 //#ifdef MP-WEIXIN
					 //  uni.login({
						// provider: 'weixin',
						// success: function (loginRes) {
						// uni.getUserInfo({
						//    success(e) {
						// 		self.moxiPost('/index/app/login',{username:e.userInfo.nickName,pic:e.userInfo.avatarUrl,unicode:loginRes.code},function(data){
									
						// 			self.msg('登录成功！')
						// 			self.back()
						// 		})
						//    },fail(e) {
						// 	self.msg('授权登录失败！')
						//    }
						// })
						// }
					 //  });
				 //#endif
				 //#ifdef MP-TOUTIAO
						  uni.login({
							provider: 'toutiao',
							success: function (loginRes) {
								
							uni.getUserInfo({
							   success(e) {
									self.moxiPost('/index/app/login',{username:e.userInfo.nickName,pic:e.userInfo.avatarUrl,unicode:loginRes.code},function(data){
										self.msg('登录成功！')
										self.back()
									})
							   },fail() {
								self.msg('授权登录失败')
							   }
							})
							}
						  });
				 //#endif
				 //#ifdef MP-QQ
				 	  uni.login({
				 	    provider: 'qq',
				 	    success: function (loginRes) {
							uni.getUserInfo({
							   success(e) {
									self.moxiPost('/index/app/login',{username:e.userInfo.nickName,pic:e.userInfo.avatarUrl,unicode:loginRes.code},function(data){
										self.msg('登录成功！')
										self.back()
									})
							   },fail() {
									self.msg('授权登录失败！')
							   }
							})
				 	    }
				 	  });
				
				 //#endif
				 
				 // #ifdef MP-ALIPAY
				 uni.login({
				   provider: 'alipay', //使用支付宝登录
				   success: function (loginRes) {
					   uni.getUserInfo({
						   success(e) {
							   self.moxiPost('/index/app/login',{username:e.userInfo.nickName,pic:e.userInfo.avatarUrl,unicode:loginRes.code},function(data){
									self.msg('登录成功！')
									self.back()
							   })
						   },fail() {
						   	self.msg('获取用户信息失败！')
						   }
						})
				 	
				   }
				 });
				 // #endif
				 // #ifdef MP-BAIDU
				 
				 uni.login({
				   provider: 'baidu', //使用百度登录
				   success: function (loginRes) {
					   if(res.detail&&res.detail.userInfo){
						   let e = res.detail;
						   self.moxiPost('/index/app/login',{username:e.userInfo.nickName,pic:e.userInfo.avatarUrl,unicode:loginRes.code},function(data){
								self.msg('登录成功！')
								self.back()
						   	})
					   }else{
						   self.msg("授权登录失败！")
					   }
				   },fail(e) {
					   if(e.errCode==10004){
						   self.msg('未登录百度账号')
					   }
				   }
				 });
				 // #endif
				 },
				 //获取短信验证码
				 getCode() {
				 	if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
				 		this.msg( '请输入正确手机号');
				 		return false;
				 	}
				 	var that = this;
				 	//这里请求后台获取短信验证码
				 	this.moxiPost('/index/app/get_code',{phone:that.phone},function(data){
				 		var interval = setInterval(() => {
				 			that.showText = false;
				 			var times = that.second - 1;
				 			//that.second = times<10?'0'+times:times ;//小于10秒补 0
				 			that.second = times;
				 		}, 1000);
				 		setTimeout(() => {
				 			clearInterval(interval);
				 			that.second = 60;
				 			that.showText = true;
				 		}, 60000);
				 		that.msg(data.hint);
				 	})
				 },
			}
			
	}
</script>

<style>
	.weui-input{
	    border: 1px solid gray;
	    border-radius: 10rpx;
	    height:66rpx;
	    font-size: 50rpx;
	    width:540rpx;
	    margin-left: 20rpx;
	}
	.weui-text{
	    height:66rpx;
	    font-size: 40rpx;
	    line-height:66rpx;
	    width:140rpx;
	    margin-left: 20rpx;
	}
	.img-a {
		position: absolute;
		width: 100%;
		top: -280rpx;
		right: -100rpx;
		z-index: 1;
	}
	.img-b {
		z-index: 1;
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		margin-bottom: -200rpx;
		/* #ifdef MP-QQ */
		margin-bottom: -250rpx;
		/* #endif */
	}
	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}
	
	.t-login button {
		border: none;
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}
	
	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	.t-login .t-a input{width: 100%;}
	.t-login .t-a {
		display: flex;
		flex-direction: row;
		position: relative;
	}
	
	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;z-index: 100;
	}
	
	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 120rpx 0;
		
	}
	
	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
		z-index: 100;
	}
	
	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}
	
	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}
	
	.t-login .t-g {
		float: left;
		width: 50%;
	}
	
	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}
	
	
	.t-login .uni-input-placeholder {
		color: #000;
	}
	
	.cl {
		zoom: 1;
	
	}
	
	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>